<template>
  <div id="app">
    <Nav></Nav>
    <div class="body">
      <keep-alive include="">
        <transition :name="animateName" mode="">
        <router-view />
      </transition>
      </keep-alive>  
    </div>
    <TabBar :tabBars="tabBars"></TabBar>
  </div>
</template>
<script>
  import TabBar from "@/components/TabBar.vue"
  import Nav from "@/components/Nav.vue"
  //将当前App页面组件对应的Vue实例(App组件实例)导出给外界
  export default {
    name: "App",
    data: function () {
      return {
        tabBars: [
          { className: "icon-icon_huabanfuben", title: "外卖", path: { name: 'main' } },
          { className: "icon-faxian", title: "搜索", path: { name: "search" } },
          { className: "icon-faxian", title: "订单", path: { name: "order" } },
          { className: "icon-wode", title: "我的", path: { name: "my" } },
        ],
        animateName: "push",

      }
    },
    components: {
      TabBar, Nav
    },
    watch: {
      $route: function (to, from) {
        if (to.meta.deep == 1) {
          this.$store.commit('changeTabIndex', to.meta.barIndex)
        }
        //修改页面动画切换的名称
        if (from.meta.deep) {
          this.animateName = to.meta.deep - from.meta.deep > 0 ? 'push' : (to.meta.deep - from.meta.deep == 0 ? "" : "pop");
        }
      }
    },
  }
</script>
<style lang="less">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  .body {
    padding: 44px 0px 48px;
    /*no*/
  }

  /* 书写页面过渡效果 */
  .push-enter,
  .pop-leave-to {
    transform: translateX(100%);
  }

  .push-enter-active,
  .push-leave-active,
  .pop-enter-active,
  .pop-leave-active {
    width: 100%;
    transition: all 0.5s linear;
    position: absolute;
    top: 44px;
    /*no*/
  }

  .push-leave-to,
  .pop-enter {
    transform: translateX(-100%);
  }
</style>